<template>
    <div>
        <el-tabs type="border-card">
            <el-tab-pane label="A区车位">
                <el-card class="box-card" v-for="item in seatList1" :key="item.id" shadow="hover">
                    <div slot="header" class="clearfix">
                        <span>{{ item.id }}</span>
                        <el-button style="float: right; padding: 3px 0" type="text" @click="getItem(item.id)">设置
                        </el-button>
                    </div>
                    <div class="text item">
                        <el-tag type="success" v-if="!item.isEmpty">空闲</el-tag>
                        <el-tag type="danger" v-else>使用中</el-tag>
                        <el-tag type="info" v-if="item.isEnable">维修中</el-tag>
                        <el-tag type="danger" v-if="item.predetermined">已预定</el-tag>
                    </div>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="B区车位">
                <el-card class="box-card" v-for="item in seatList2" :key="item.id" shadow="hover">
                    <div slot="header" class="clearfix">
                        <span>{{ item.id }}</span>
                        <el-button style="float: right; padding: 3px 0" type="text" @click="getItem(item.id)">设置
                        </el-button>
                    </div>
                    <div class="text item">
                        <el-tag type="success" v-if="!item.isEmpty">空闲</el-tag>
                        <el-tag type="danger" v-else>使用中</el-tag>
                        <el-tag type="info" v-if="item.isEnable">维修中</el-tag>
                        <el-tag type="danger" v-if="item.predetermined">已预定</el-tag>
                    </div>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="C区车位">
                <el-card class="box-card" v-for="item in seatList3" :key="item.id" shadow="hover">
                    <div slot="header" class="clearfix">
                        <span>{{ item.id }}</span>
                        <el-button style="float: right; padding: 3px 0" type="text" @click="getItem(item.id)">设置
                        </el-button>
                    </div>
                    <div class="text item">
                        <el-tag type="success" v-if="!item.isEmpty">空闲</el-tag>
                        <el-tag type="danger" v-else>使用中</el-tag>
                        <el-tag type="info" v-if="item.isEnable">维修中</el-tag>
                        <el-tag type="danger" v-if="item.predetermined">已预定</el-tag>
                    </div>
                </el-card>
            </el-tab-pane>
            <el-tab-pane>
                <span slot="label"><i class="el-icon-search"></i> 查询车位</span>
                <el-form :inline="true" class="demo-form-inline" @submit.native.prevent>
                    <el-form-item label="车位号" style="margin-bottom:0;">
                        <el-input @keyup.native.enter="querySingle" v-model="SeatInput" placeholder="请输入车位号"></el-input>
                    </el-form-item>
                    <el-form-item style="margin-bottom:0;">
                        <el-button type="primary" @click="querySingle">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-divider></el-divider>
                <el-card class="box-card" v-for="item in seatList" :key="item.id" shadow="hover">
                    <div slot="header" class="clearfix">
                        <span>{{ item.id }}</span>
                        <el-button style="float: right; padding: 3px 0" type="text" @click="getItem(item.id)">设置
                        </el-button>
                    </div>
                    <div class="text item">
                        <el-tag type="success" v-if="!item.isEmpty">空闲</el-tag>
                        <el-tag type="danger" v-else>使用中</el-tag>
                        <el-tag type="info" v-if="item.isEnable">维修中</el-tag>
                        <el-tag type="danger" v-if="item.predetermined">已预定</el-tag>
                    </div>
                </el-card>
            </el-tab-pane>
        </el-tabs>

        <!-- 设置弹出框 -->
        <el-dialog :title="form.id" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="是否使用" label-width="120px">
                    <div>
                        <el-radio v-model="form.isEmpty" label="1" border size="medium">使用中</el-radio>
                        <el-radio v-model="form.isEmpty" label="0" border size="medium">空闲</el-radio>
                    </div>
                </el-form-item>
                <el-form-item label="是否可用" label-width="120px">
                    <div>
                        <el-radio v-model="form.isEnable" label="0" border size="medium">可用</el-radio>
                        <el-radio v-model="form.isEnable" label="1" border size="medium">维修</el-radio>
                    </div>
                </el-form-item>
                <el-form-item label="是否预定" label-width="120px">
                    <div>
                        <el-radio v-model="form.predetermined" label="1" border size="medium">已预定</el-radio>
                        <el-radio v-model="form.predetermined" label="0" border size="medium">未预定</el-radio>
                    </div>
                </el-form-item>
                <el-form-item label="驶入时间" label-width="120px">
                    <el-input v-model="form.arrive_time" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="备注" label-width="120px">
                    <el-input v-model="form.inFo" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="update">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import moment from 'moment';
export default {
    inject: ['reload'],
    data() {
        return {
            seatList: [],
            seatList1: [],
            seatList2: [],
            seatList3: [],
            dialogFormVisible: false,
            form: {
                id: '',
                isEmpty: 0,
                isEnable: 0,
                predetermined: 1,
                arrive_time: null,
                inFo: ""
            },
            SeatInput: '',
        }
    },
    methods: {
        getItem(val) {
            this.$http.carSeatApi.querySeatById({ qid: val }).then(res => {
                console.log(res);
                this.form = res.data.data[0];
                this.form.isEmpty += ''
                this.form.isEnable += ''
                this.form.predetermined += ''
                if (this.form.arrive_time) {
                    this.form.arrive_time = moment(this.form.arrive_time * 1000).format('YYYY-MM-DD,HH:mm:ss');
                } else {
                    this.form.arrive_time = '无数据';
                }
            });
            this.dialogFormVisible = true;
        },
        update() {
            if (this.form.arrive_time == '无数据') {
                this.form.arrive_time = 0
            }
            this.$http.carSeatApi.updateSeat(this.form).then(res => {
                if (res.data.code == 200) {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.dialogFormVisible = false;
                    this.reload();
                } else {
                    this.$message.error('修改失败');
                }
            });
        },
        querySingle() {
            console.log(this.SeatInput);
            this.$http.carSeatApi.querySeatById({ qid: this.SeatInput }).then(res => {
                console.log(res);
                this.seatList = res.data.data;
            });
        }
    },
    mounted() {
        this.$http.carSeatApi.querySeat({ qid: 'A' }).then(res => {
            this.seatList1 = res.data.data;
        });
        this.$http.carSeatApi.querySeat({ qid: 'B' }).then(res => {
            this.seatList2 = res.data.data;
        });
        this.$http.carSeatApi.querySeat({ qid: 'C' }).then(res => {
            this.seatList3 = res.data.data;
        });
    },
}
</script>

<style lang="scss" scoped>
.el-tab-pane {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-flow: row wrap;

    .box-card {
        margin: 0 10px 10px 0;
        cursor: pointer;

    }
}

.text {
    font-size: 14px;
}

.item {
    .el-tag {
        margin-right: 3px;
    }
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    width: 150px;
}
</style>